<template>
  <div class="editor-products" :style="{ backgroundColor: props.backgroundColor }">
    <div class="products-grid" :style="gridStyle">
      <div 
        v-for="index in props.productCount" 
        :key="index" 
        class="product-card"
        :class="{ 'card-shadow': props.cardStyle === 'shadow' }"
      >
        <div class="product-image-wrapper">
          <img :src="getRandomImage()" class="product-image" />
          <div v-if="props.showTag" class="product-tag">新品</div>
        </div>
        <div class="product-info">
          <div v-if="props.showTitle" class="product-title" :style="{ color: props.titleColor }">
            {{ `商品标题 ${index}` }}
          </div>
          <div v-if="props.showPrice" class="product-price" :style="{ color: props.priceColor }">
            ¥{{ Math.floor(Math.random() * 900) + 100 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

const props = defineProps({
  columns: {
    type: Number,
    default: 2
  },
  showPrice: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showTag: {
    type: Boolean,
    default: false
  },
  productCount: {
    type: Number,
    default: 2
  },
  priceColor: {
    type: String,
    default: '#ff4400'
  },
  titleColor: {
    type: String,
    default: '#333333'
  },
  cardStyle: {
    type: String,
    default: 'shadow'
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  }
});

const gridStyle = computed(() => {
  return {
    gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
  };
});

// 随机获取商品图片示例
const getRandomImage = () => {
  const images = [
    'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png',
    'https://pic1.imgdb.cn/item/683e9dc958cb8da5c8282c4e.png'
  ];
  return images[Math.floor(Math.random() * images.length)];
};

defineOptions({
  name: 'editor-products'
});
</script>

<style lang="scss" scoped>
.editor-products {
  width: 100%;
  padding: 6px;
  box-sizing: border-box;
  
  .products-grid {
    display: grid;
    gap: 6px;
    
    .product-card {
      background-color: #fff;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #f0f0f0;
      transition: all 0.3s;
      
      &.card-shadow {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
      }
      
      .product-image-wrapper {
        position: relative;
        padding-top: 80%;
        
        .product-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .product-tag {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #ff4400;
          color: #fff;
          font-size: 12px;
          padding: 2px 6px;
          border-bottom-left-radius: 6px;
        }
      }
      
      .product-info {
        padding: 4px 6px;
        
        .product-title {
          font-size: 13px;
          margin-bottom: 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .product-price {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 